<template>
    <div class="info-index">
        <el-tabs type="border-card">
            <el-tab-pane
                :label="info.label"
                v-for="info in personalInformation"
                :key="info.name"
            >
                <transition name="fade" mode="out-in">
                    <component :is="tabs[info.name]"></component> </transition
            ></el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { personalInformation } from '@/utils/constants'
import essentialInformation from './components/essentialInformation.vue'
import interestClassification from './components/interestClassification.vue'
import mySize from './components/mySize.vue'
const tabs = {
    essentialInformation,
    interestClassification,
    mySize,
}
</script>

<style lang="scss" scoped>
.info-index {
    :deep(.el-tabs__item) {
        // color: #da9233;
        &:hover {
            color: #da9233 !important;
        }
        &.is-active {
            color: #da9233;
        }
    }
    height: 800px;
}
</style>
